<template>
  <a-spin :spinning="confirmLoading">
    <JFormContainer :disabled="disabled">
      <template #detail>
        <!-- 盲板抽堵 -->
        <div id="printContent">
          <h2 class="h-style">{{formData.jobType_dictText}}证</h2>
          <table id="staffLeaveTable">
            <tbody>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">作业证编号</td>
                <td class="firstTd" colspan="2">{{formData.number}}</td>
                <td class="firstTd" colspan="2">申请单位</td>
                <td class="firstTd" colspan="2">{{formData.applyCompany_dictText}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">申请人</td>
                <td class="firstTd" colspan="2">{{formData.applicant_dictText}}</td>
                <td class="firstTd" colspan="2">作业申请时间</td>
                <td class="firstTd" colspan="2">{{formData.applyTime}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">作业类别</td>
                <td class="firstTd" colspan="2">{{formData.blindPlateJobType_dictText}}</td>
                <td class="firstTd" colspan="2">作业区域</td>
                <td class="firstTd" colspan="2">{{formData.cell_dictText}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">设备管道名称</td>
                <td class="firstTd" colspan="6">{{formData.equipmentPipeName}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">设备原有介质</td>
                <td class="firstTd" colspan="2">{{formData.equipmentNativeMedium}}</td>
                <td class="firstTd" colspan="2">设备温度</td>
                <td class="firstTd" colspan="2">{{formData.equipmentTemperature}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">设备压力</td>
                <td class="firstTd" colspan="2">{{formData.equipmentPressure}}</td>
                <td class="firstTd" colspan="2">盲板材质</td>
                <td class="firstTd" colspan="2">{{formData.blindSheet}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">盲板规格</td>
                <td class="firstTd" colspan="2">{{formData.blindPlateSpecification}}</td>
                <td class="firstTd" colspan="2">盲板编号</td>
                <td class="firstTd" colspan="2">{{formData.blindPlateNumber}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">作业内容</td>
                <td class="firstTd" colspan="6">{{formData.content}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">作业单位</td>
                <td class="firstTd" colspan="2">{{formData.operationCompany}}</td>
                <td class="firstTd" colspan="2">作业负责人</td>
                <td class="firstTd" colspan="2">{{formData.constructionMan}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">作业人</td>
                <td class="firstTd" colspan="6">{{formData.operatorAndCode}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">企内监护人</td>
                <td class="firstTd" colspan="2">{{formData.companyGuardian}}</td>
                <td class="firstTd" colspan="2">施工单位监护人</td>
                <td class="firstTd" colspan="2">{{formData.constructionGuardian}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">关联的其他特殊作业及安全作业票编号</td>
                <td class="firstTd" colspan="6">{{formData.relevanceNumber != '' ?formData.relevanceNumber:"/"}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">风险辨识结果</td>
                <td class="firstTd" colspan="6">{{formData.riskIdentificationResult != '' ?formData.riskIdentificationResult_dictText:"/"}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">作业计划开始时间</td>
                <td class="firstTd" colspan="2">{{formData.planStartDate}}</td>
                <td class="firstTd" colspan="2">至</td>
                <td class="firstTd" colspan="2">{{formData.planEndDate}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">盲板位置图</td>
                <td class="colsTd" colspan="6">
                  <img class="colsTdImg" :src="getFileAccessHttpUrl(formData.blindPlateImg)" />
                </td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">实际作业开始时间</td>
                <td class="firstTd" colspan="2">{{formData.actualStartDate != '' ? formData.actualStartDate:"/"}}</td>
                <td class="firstTd" colspan="2">实际作业结束时间</td>
                <td class="firstTd" colspan="2">{{formData.actualEndDate != '' ? formData.actualEndDate:"/"}}</td>
              </tr>
              <tr class="tr-style">
                <td class="colsTd">分析项目</td>
                <td class="colsTd">采样点</td>
                <td class="colsTd" colspan="2">合格标准</td>
                <td class="colsTd" colspan="2">分析结果</td>
                <td class="colsTd">采样时间</td>
                <td class="colsTd">分析人</td>
              </tr>
              <tr class="tr-style">
                <td class="colsTd" colspan="8">间隔作业</td>
              </tr>
              <tr class="tr-style">
                <td class="colsTd" colspan="2">暂停时间</td>
                <td class="colsTd" colspan="2">恢复时间</td>
                <td class="colsTd" colspan="2">间隔(分)</td>
                <td class="colsTd" colspan="2">确认人</td>
              </tr>
              <tr class="tr-style">
                
                
              </tr>
              <tr class="tr-style">
                <td class="colsTd">序号</td>
                <td class="colsTd" colspan="5">安全措施</td>
                <td class="colsTd">是否涉及</td>
                <td class="colsTd">确认人</td>
              </tr>
              <tr class="tr-style" v-for="(measureRecord,index) in measureRecordList" :key="measureRecord.index">
                <td class="colsTd">{{index +  1}}</td>
                <td class="colsTdMeasure" colspan="5">{{measureRecord.measure}}</td>
                <td class="colsTd">{{measureRecord.isNot_dictText}}</td>
                <td class="colsTd">
                  <img class="colsTdImg" :src="getFileAccessHttpUrl(measureRecord.img)" />
                </td>
              </tr>
              <tr class="tr-style">
                <td class="colsTd" colspan="8">安全交底</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="2">作业活动</td>
                <td class="firstTd" colspan="6">{{formData.eventDate}}</td>
              </tr>
              
              <tr class="tr-style" v-for="(securityDisclosureRecord,index) in jobTicketSecurityDisclosureRecordList" :key="securityDisclosureRecord.index">
                <td class="firstTd" colspan="2">安全交底人</td>
                <td class="colsTd" colspan="6">
                  <img class="colsTdImg" :src="getFileAccessHttpUrl(securityDisclosureRecord.confessorImg)" />
                </td>
              </tr>
              <tr class="tr-style" v-for="(securityDisclosureRecord,index) in jobTicketSecurityDisclosureRecordList" :key="securityDisclosureRecord.index">
                <td class="firstTd" colspan="2">接受交底人</td>
                <td class="colsTd" colspan="6">
                  <img class="colsTdImg" :src="getFileAccessHttpUrl(securityDisclosureRecord.theBetrayedImg)" />
                </td>
              </tr>
              <tr class="tr-style" v-for="(examineRecord,index) in jobTicketExamineRecordList" :key="examineRecord.index">
                <td class="firstTd" colspan="2">{{examineRecord.auditorRole}}</td>
                <td class="firstTd" colspan="2">{{examineRecord.idea}}</td>
                <td class="colsTd" colspan="2">
                  <img class="colsTdImg" :src="getFileAccessHttpUrl(examineRecord.auditorImg)" />
                </td>
                <td class="firstTd" colspan="2">{{examineRecord.confirmationTime}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" rowspan="1" colspan="2">完工验收情况</td>
                <td class="firstTd" rowspan="1" colspan="2">作业结束，相关设施归位</td>
                <td colspan="4">
                  <table id="sonTable">
                    <tbody>
                      <tr v-for="(acceptanceCheckRecord,index) in jobTicketAcceptanceCheckRecordList" :key="index">
                        <td class="sonTd">{{acceptanceCheckRecord.acceptanceCheckRole}}</td>
                        <td class="sonTd">
                          <img :src="getFileAccessHttpUrl(acceptanceCheckRecord.acceptanceCheckMan)" />
                        </td>
                        <td class="sonTd">{{acceptanceCheckRecord.acceptanceCheckTime}}</td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="8">
                  <span>注：许可证一式四联,第一联(白)存放在作业所属单位,第二联(红)由施工单位作业人员持有，第三联（蓝)由作业所
                        属单位现场监护人持有,第四联(黄)存放在作业所属单位控制室或班长固定位置
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </JFormContainer>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
  import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
  import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
  import JCheckbox from "/@/components/Form/src/jeecg/components/JCheckbox.vue";
  import { getValueType } from '/@/utils';
  import { tbJobTicketJsaAnalyzeList,tbJobTicketMeasureRecordList,tbJobTicketSecurityDisclosureRecordList,
            tbJobTicketAcceptanceCheckRecordList,tbJobTicketExamineRecordList } from '../TbJobTicket.api';
  import { generateReportAndDownload,generateReport,jeecgDemoHtml } from '../TbJobTicket.api';
  import { Form } from 'ant-design-vue';
  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
  import { useUserStore } from '/@/store/modules/user';
  import UserTable from '@/views/system/user/UserTable.vue';
  import { useDrawer } from '/src/components/Drawer';
  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
  import { printJS } from '/@/hooks/web/usePrintJS';
  
  const props = defineProps({
    formDisabled: { type: Boolean, default: false },
    formData: { type: Object, default: () => ({})},
    formBpm: { type: Boolean, default: true }
  });
  const formRef = ref();
  const useForm = Form.useForm;
  const emit = defineEmits(['register', 'ok']);
  const formData = reactive<Record<string, any>>({
    id: '',
    number: '',   
    applicant: '',
    applyCompany: '', 
    applyCompany_dictText: '',   
    applicant_dictText: '',
    applyTime: '',
    jobType: '',
    jobType_dictText: '',
    content: '',
    cell: '',  
    cell_dictText: '',
    hotMode: '',
    hotLevel_dictText: '',
    operationCompany: '',  
    operationManager: '',
    companyGuardian: '',
    constructionGuardian: '',  
    operatorAndCode: '',
    relevanceNumber: '', 
    riskIdentificationResult: '',
    riskIdentificationResult_dictText: '',  
    planStartDate: '',
    planEndDate: '',   
    actualStartDate: '',
    actualEndDate: '',
    eventDate: '',
    constructionMan: '', 
    
    blindPlateJobType: '',   
    blindPlateJobType_dictText: '',   
    equipmentPipeName: '',
    equipmentNativeMedium: '',   
    equipmentTemperature: '',   
    equipmentPressure: '',   
    blindSheet: '',   
    blindPlateSpecification: '',   
    blindPlateNumber: '',   
    blindPlateImg: '',
  });
  const jobTicketJsaAnalyzeList = ref();
  const measureRecordList = ref();
  const jobTicketSecurityDisclosureRecordList = ref();
  const jobTicketAcceptanceCheckRecordList = ref();
  const jobTicketExamineRecordList = ref();
  const { createMessage } = useMessage();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  const { resetFields, validate, validateInfos } = useForm(formData, { immediate: false });
  const userStore = useUserStore();
  const htmlContent = ref();

  // 表单禁用
  const disabled = computed(()=>{
    if(props.formBpm === true){
      if(props.formData.disabled === false){
        return false;
      }else{
        return true;
      }
    }
    return props.formDisabled;
  });
  
  
  /**
   * 新增
   */
  function add() {
    /* 获取编号之后再进行页面渲染*/
  }

  /**
   * 编辑
   */
  function edit(record) {
    nextTick(() => {
      resetFields();
      const tmpData = {};
      Object.keys(formData).forEach((key) => {
        if(record.hasOwnProperty(key)){
          tmpData[key] = record[key]
        }
      })
      //赋值
      Object.assign(formData, tmpData);
      
      initJSAAnalysisData();
      initMeasureRecordList();
      initSecurityDisclosureRecordList();
      initAcceptanceCheckRecordList();
      initJobTicketExamineRecordList();
    });
  }
  
  /* JSA分析*/
  function initJSAAnalysisData(){
    tbJobTicketJsaAnalyzeList({jobTicketId: formData.id}).then((res) => {
      jobTicketJsaAnalyzeList.value = res.records
      console.log("=========JSA分析数据========="+JSON.stringify(jobTicketJsaAnalyzeList.value))
    })
  }
  
  /* 管控措施确认*/
  function initMeasureRecordList(){
    tbJobTicketMeasureRecordList({jobTicketId: formData.id,pageNo:1,pageSize:1000}).then((res) => {
      measureRecordList.value = res.records
      console.log("=========管控措施确认数据========="+JSON.stringify(measureRecordList.value))
    })
  }
  
  /* 安全交底确认*/
  function initSecurityDisclosureRecordList(){
    tbJobTicketSecurityDisclosureRecordList({jobTicketId: formData.id}).then((res) => {
      jobTicketSecurityDisclosureRecordList.value = res.records
      console.log("=========安全交底数据========="+JSON.stringify(jobTicketSecurityDisclosureRecordList.value))
    })
  }
  
  /* 完工验收确认*/
  function initAcceptanceCheckRecordList(){
    tbJobTicketAcceptanceCheckRecordList({jobTicketId: formData.id}).then((res) => {
      jobTicketAcceptanceCheckRecordList.value = res.records
      console.log("=========完工验收数据========="+JSON.stringify(jobTicketAcceptanceCheckRecordList.value))
    })
  }
  
  /* 审核记录确认*/
  function initJobTicketExamineRecordList(){
    tbJobTicketExamineRecordList({jobTicketId: formData.id}).then((res) => {
      jobTicketExamineRecordList.value = res.records
      console.log("========= 审核记录数据========="+JSON.stringify(jobTicketExamineRecordList.value))
    })
  }
  
  function onPrint() {
    printJS({
      printable: '#printContent',
      type: 'html',
    });
  }

  defineExpose({
    add,
    edit,
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    padding: 14px;
    border: 3px solid #000000; /* 设置边框颜色和宽度 */
    border-radius: 3px; /* 设置边框圆角 */
  }
  #printContent {
    //border: 1px solid black;
    width: 85%; /* 宽度是父元素宽度的一半 */
    //height: 90%; /* 高度是父元素高度的一半 */
    margin: 20px auto; /* 水平居中并添加外边距 */
    //border-radius: 10%; /* 设置圆角半径为宽度或高度的一半 */
    //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置边框阴影 */
  }
  #staffLeaveTable {
    width: 100%;
    table-layout: fixed;
  }
  #sonTable {
    width: 100%;
    table-layout: fixed;
  }
  .tr-style {
    border: 1px solid black;
  }
  .h-style {
    text-align: center;
  }
  .firstTd {
    border: 1px solid black;
    font-size: 16px;
    word-wrap: break-word;
  }
  .sonTd {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    font-size: 16px;
    word-wrap: break-word;
  }
  .colsTd {
    text-align: center;
    border: 1px solid black;
  }
  .colsTdImg {
    text-align: center;
    width: 40%;
    heigth: 30%;
  }
  .colsTdMeasure {
    text-align: left;
  }
</style>
